<!DOCTYPE html>

<html lang="ch">

<head>
    <meta charset="UTF-8">
    <title>盐城共享单车网络</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="http://api.map.baidu.com/api?v=3.0&ak=DekeYzYeAYX1nA8fYzw1lt6uqTVXe8Bt&s=1"></script>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts-gl.js"></script>
    <script type="text/javascript" src="js/bmap.min.js"></script>
</head>
<body>
<div id="main" style="width: 1520px;height:715px;"></div>


<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var converData = function (data) {
        var res = [];
        for (let i = 0; i < data.length; i++) {
            if (data[i][0] === -1) continue;
            else {
                res.push(
                    {
                        name: "" + data[i][0],
                        value: [data[i][1], data[i][2]]
                    }
                )
            }
        }
        return res;
    };
    var getCoord = function (staCoord, staNum) {
        var res = [];
        for (let i = 0; i < staNum.length; i++) {
            res.push(
                {
                    name: "" + staNum[i],
                    value: [staCoord[staNum[i]][1], staCoord[staNum[i]][2]]
                }
            )
        }
        return res;
    };
    option = null;
    var color = ['#FF0000', '#00FF00', '#FF00FF', '#00FFFF'];
    var series = [];
    var series_name = ['cluster_centrality', 'centrality', 'cluster_salience', 'salience'];
    series.push({
        name: 'all_station',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: [], //converData(data.station),
        symbolSize: 4,
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: 'yellow',
            }
        }
    });

    series_name.forEach(function (item, i) {
        series.push(
            {
                name: item,
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: [], //converData(data.station),
                symbolSize: 6,
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: color[i],
                        shadowBlur: 0.5,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            },
            {
                name: item,
                type: 'lines',
                large: true,
                zlevel: 1,
                largeThreshold: 2000,
                coordinateSystem: 'bmap',
                data: [],//routes,
                lineStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: color[i]
                            },
                                {offset: 1, color: color[(i+1)%4]}], false
                        ),
                        opacity: 0.5,
                        width: 1.5,
                        curveness: 0.1
                    }
                },
                effect: {
                    show: true,
                    constantSpeed: 30,
                    symbol: 'pin',
                    symbolSize: 3,
                    trailLength: 0
                }
                //blendMode: 'lighter',
            }
        );
    });


    option = {
        //backgroundColor: '#003',
        title: {
            text: '盐城共享单车网络',
            left: 'center',
            textStyle: {
                color: '#c67752'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter:function (params) {
                console.log(params);
                if(params.seriesType==="effectScatter"){
                    return "站点号："+params.data.name;
                }else if(params.seriesType==="lines"){
                    return ""+params.data.fromName + "->" +params.data.toName;
                }
            }
        },
        legend:{
            orient:'vertical',
            top:'bottom',
            left:'right',
            data:series_name,
            textStyle: {
                color:'#fff'
            },
            selectedMode: 'single'
        },
        bmap: {
            center: [120.20, 33.38],
            zoom: 14,
            roam: true,
            mapStyle: {
                styleJson: [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#031628'
                        }
                    },
                    {
                        'featureType': 'land',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#000102'
                        }
                    },
                    {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#0b3d51'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#08304b'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -70
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#857f7f'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#062032'
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#465b6c'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        'featureType': 'label',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }
                ]
            }
        },
        series: series
    };

    myChart.showLoading();
    $.getJSON('Json/AllData.json', function (data) {

        function getStationCoord(idx) {
            return [data.station[idx][1], data.station[idx][2]];
        }

        function getRoutes(routes,node)
        {
            var res=[];
            for (let i = 0; i < routes.length; i++) {
                if (node.indexOf(routes[i][0])!==-1 && node.indexOf(routes[i][1])!==-1){
                    res.push({
                        fromName:routes[i][0],
                        toName:routes[i][1],
                        coords:[
                            getStationCoord(routes[i][0]),
                            getStationCoord(routes[i][1])
                        ]
                    })
                }
            }
            return res;
        }
        myChart.hideLoading();
        myChart.setOption({
            series: [
                {
                    data: converData(data.station)
                },
                {
                    data: getCoord(data.station, data.cluster_centrality)
                },
                {
                    data: getRoutes(data.SHH_routes,data.cluster_centrality)
                },
                {
                    data: getCoord(data.station, data.centrality)
                },
                {
                    data: getRoutes(data.SHH_routes,data.centrality),
                },
                {
                    data: getCoord(data.station, data.cluster_salience)
                },
                {
                    data: getRoutes(data.SHH_routes,data.cluster_salience)

                },
                {
                    data: getCoord(data.station, data.salience)
                },
                {
                    data: getRoutes(data.SHH_routes,data.salience)
                }
            ]
        });
    });

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>
</body>
</html>